<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>公司认证</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <style>
            body{
                background: #f3f3f3;
                font-size: 14px;
            }
            input[type="text"]{
                margin-bottom: 0;
                border:none;
                padding-top: 1px;
            }
            .aui-list-view-cell{
                vertical-align: middle;
                padding:0 15px;
            }
            header{

            }
            footer{
                position: relative;
                /*bottom: 0;*/
                width: 100%;
            }
            .wraper{
                /*margin-top: 45px;*/
                /*margin-bottom: 55px;*/
            }
            .aui-list-view{
                margin-bottom: 0;
            }
            .aui-arrow-right:after{
                content: "";
            }
            .rzTitle{
                width: 20%;
                float: left;
                vertical-align: middle;
                height: 45px;
                line-height: 45px;
            }
            .rzInput{
                width: 80%;
                float: left;
                height: 45px;
                line-height: 45px;
            }
            input{
              font-size: 14px;
            }
            .picTitle{
                width: 100%;
                margin-top: 10px;
            }
            .picGroup{
                text-align: center;
                padding:5px;
                width: 32%;
                /*float: left;*/
                display: table;
                height: 120px;
                margin: 15px auto;
            }
            .picGroupCell{
                display: table-cell;
                background: #f5f5f5;
                vertical-align: middle;
            }
            /*下面弹出的样式*/
            .pickerToTop{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(143px);
                height:143px;
                overflow-y:auto;
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 999;
                width: 100%;
                text-align: center;
            }
            .toTopAnimate{
                -webkit-transform: translateY(00px);
            }
            .pickerToTop .aui-list-view-cell{
                padding: 12px 15px;
            }
            .wraper{
                overflow: hidden;
            }
            .hide{
                display: none;
            }
            .pic img{
                width: 100%;
            }
        </style>
    </head>
    <body>

    <header class="aui-bar aui-bar-nav aui-border-b">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="aui-title">
            公司信息认证
        </div>
    </header>


   <div class="wraper">
           <div class="scroll">
             <ul class="aui-list-view">
               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right rzTitle">姓名</div>
                   <div class="aui-arrow-right rzInput"><input onpropertychange="checkAll()" oninput="checkAll()" type="text" placeholder="请输入姓名" id="companyName"></div>
               </li>
               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right rzTitle">公司名称</div>
                   <div class="aui-arrow-right rzInput"><input onpropertychange="checkAll()" oninput="checkAll()" type="text" placeholder="请输入公司名称" id="address"></div>
               </li>
               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right rzTitle">经营地址</div>
                   <div class="aui-arrow-right rzInput"><input onpropertychange="checkAll()" oninput="checkAll()" type="text" placeholder="请输入经营地址" id="address"></div>
               </li>
               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right rzTitle">营业执照编号</div>
                   <div class="aui-arrow-right rzInput"><input type="text" onpropertychange="checkAll()" oninput="checkAll()" placeholder="请输入营业执照编号" id="jingying"></div>
               </li>

               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right picTitle">营业执照</div>

                   <div class="picGroup zhaoPicTemplate" tapmode data-type="zhaoPicTemplate" onclick="showPicker(this)">
                       <div class="picGroupCell zhaoPic ">
                           <p><img src="../../image/addPic.png"></p>
                           <p>添加图片</p>
                           <p>0/9</p>
                       </div>
                       <div class="pic zhaoPic hide">
                           <!--通过操作hide显示隐藏-->
                           <img src="../../image/shilikucun.jpg" alt="">
                       </div>
                   </div>
               </li>
               <li class="aui-list-view-cell">
                   <div class="aui-arrow-right picTitle">上传店铺实景或名片</div>

                   <div class="picGroup shopPicTemplate" tapmode data-type="shopPicTemplate" onclick="showPicker(this)">
                       <div class="picGroupCell shopPic ">
                           <p><img src="../../image/addPic.png"></p>
                           <p>添加图片</p>
                           <p>0/9</p>
                       </div>
                       <div class="pic shopShowPic hide">
                           <img src="../../image/shilikucun.jpg" alt="">
                       </div>
                   </div>
               </li>
           </ul>
           </div>
        </div>

    <footer >
        <div class="myBtn disable">提交</div>
    </footer>
    <div class="pickerToTop">
        <ul class="aui-list-view getPic">
            <li class="aui-list-view-cell" tapmode onclick="getPic(2)">
                拍照
            </li>
            <li class="aui-list-view-cell" onclick="getPic(1)">
                其他从相册选择
            </li>
            <li class=" myPickBorder" >

            </li>
            <li class="aui-list-view-cell " tapmode onclick="hidePicker()" >
                取消
            </li>
        </ul>
    </div>
    </body>
    <script type="text/javascript" src="../../script/api.js" ></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/echo.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/myInfo.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript" src="../../script/iscroll2.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            // getData();

        }
        $(function () {
            var height=$("body").height()-$("header").height()-$("footer").height();
            $(".wraper").height(height);
            setTimeout(function () {
                myScroll=new IScroll(".wraper",{
                    mouseWheel:true,
                    probeType:3,
                    click:true

                })
            },200)
        })
        // mui遮罩
        var mask = mui.createMask(hidePicker);
        // 显示遮罩
        function showPicker(obj){
            mask.show();
            $(".pickerToTop").addClass("toTopAnimate");
            //全局变量showType，可以区分是单击那个上传图片
            showType=$(obj).attr("data-type");
        }
        // 关闭遮罩
        function hidePicker(){
            $(".pickerToTop").removeClass("toTopAnimate");
            $(".pickerToTop2").removeClass("toTopAnimate");
            mask.myclose();
        }
        /*检查输入框*/
        function checkInput() {
            var len=$(".wraper").find("input[type='text']").length;
            var count=0;
            $(".wraper").find("input[type='text']").each(function (index) {
                if($(this).val()==""){
                    return false;
                }else{
                    count++;
                }
            })
            if(len==count){
                return true;
            }else{
                return false;
            }
        }
         /*检查图片*/
        function checkPic() {
            var len=$(".wraper").find(".picGroupCell").length;
            var count=0;
            $(".wraper").find(".picGroupCell").each(function (index) {
                //没有hide表示没有上传图片
                if(!$(this).hasClass("hide")){
                    return false;
                }else{
                    count++;
                }
            })
            if(len==count){
                return true;
            }else{
                return false;
            }
        }
        /*检查输入框和图片*/
        function checkAll() {
            if(checkInput() && checkPic()){
                $(".myBtn").removeClass("disable");
                $(".myBtn").attr({"onclick":"send()"});
            }else{
                $(".myBtn").addClass("disable");
                $(".myBtn").removeAttr("onclick");

            }
        }
        //上传图片后显示图片，通过参数区别是执照还是店铺的图片上传
        function showPic(type) {
            $("."+type).find(".picGroupCell").addClass("hide");//隐藏上传图片div
            $("."+type).find(".pic").removeClass("hide");//显示图片显示

        }
        function send() {
            alert("提交成功")
        }
        // 相册选择
        //选择图片后要执行checkAll方法验证是否让按钮显示颜色
        function getPic(index){
            hidePicker();
            if (index == 1) {
                api.getPicture({
                    sourceType : 'library',
                    encodingType : 'jpg',
                    mediaValue : 'pic',
                    destinationType : 'base64',
                    allowEdit : true,
                    quality : 60,
                    saveToPhotoAlbum : false
                }, function(ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            //postData();
                            //上传成功，显示图片
                            showPic(showType);
                            //执行后检查
                            checkAll();
                            api.toast({
                                msg : '更换成功',
                                duration : 2000,
                                location : 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg : err.msg,
                            duration : 2000,
                            location : 'bottom'
                        })
                    }
                })
            } else if (index == 2) {
                api.getPicture({
                    sourceType : 'camera',
                    encodingType : 'jpg',
                    mediaValue : 'pic',
                    destinationType : 'base64',
                    allowEdit : true,
                    quality : 60,
                    saveToPhotoAlbum : true
                }, function(ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            //postData();
                            //上传成功，显示图片
                            showPic(showType);
                            //执行后检查
                            checkAll();
                            api.toast({
                                msg : '更换成功',
                                duration : 2000,
                                location : 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg : err.msg,
                            duration : 2000,
                            location : 'bottom'
                        })
                    }
                })
            }
        }
    </script>
</html>